<template>
	<page-header-wrapper>
		<a-card :bordered="false">

			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">
						<a-col :md="6" :sm="24">
							<a-form-item label="状态">
								<a-select v-model="state" placeholder="请选择医生状态">
									<a-select-option :value="0">全部</a-select-option>
									<a-select-option :value="1">销售人员(自营)</a-select-option>
									<a-select-option :value="2">销售人员(代理)</a-select-option>
									<a-select-option :value="3">省区经理</a-select-option>
									<a-select-option :value="4">平台管理员</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="12" :sm="24">
							<a-button type="primary" @click="handleSearch">查询</a-button>
							<a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
							<a-button type="primary" style="margin-bottom: 8px" icon="plus" @click="addStore">
								添加代理</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<a-table :scroll="{ x: true }" ref="table" @change="tablePaginationChange" :pagination="pagination" bordered
				:dataSource="dataSource" :columns="columns" :rowKey="(record,index)=> index">
				<div slot="state" slot-scope="text, record" href="javascript:;">
					<a-tag color="blue" v-if="record.state==1">销售人员(自营)</a-tag>
					<a-tag color="green" v-else-if="record.state==2">销售人员(代理)</a-tag>
					<a-tag color="orange" v-else-if="record.state==3">省区经理</a-tag>
					<a-tag color="purple" v-else-if="record.state==4">平台管理员</a-tag>
				</div>

				<div slot="action" slot-scope="text, record" href="javascript:;">
					<a-button size='small' type="link" @click="updateInfo(record)">
						修改
					</a-button>
					<a-divider type="vertical" />
					<a-popconfirm title="是否要删除此代理？" @confirm="infoDisable(record)">
						<a-button size='small' type="link" style='color:red'>
							删除
						</a-button>
					</a-popconfirm>
				</div>
			</a-table>
		</a-card>
		<addBox ref="addBox" :visible="addFlag" @cancel="addCancel" @ok="AddSuccess">
		</addBox>
		<imgBox ref='preimg'></imgBox>

		<a-modal title="修改" :visible="pricevisible" @ok="updatePrice" @cancel="()=>{pricevisible=false}">
			<a-form :form="priceform">
				<template v-if="edittype=='kefu'">
					<a-form-item title="客服">
						<a-input v-decorator="['zhenfeibl',{ rules: [{ required: true, message: '请输入客服电话' }] }]"
							placeholder="" />
					</a-form-item>
				</template>
				<template v-else>
					<a-form-item :title="edittype=='zhenfei'?'诊金指数':'中药指数'">
						<a-input v-decorator="['zhenfeibl',{ rules: [{ required: true, message: '请输入' }] }]"
							placeholder="" />
					</a-form-item>
				</template>
			</a-form>
		</a-modal>
	</page-header-wrapper>

</template>

<script>
	import {
		STable,
		Ellipsis,
	} from '@/components'
	import {
		salespersonList,
		salespersonDel
	} from '@/api/salesperson'
	import addBox from './add'
	import imgBox from '@/components/previewImg/index'

	import {
		ExclamationCircleOutlined
	} from '@ant-design/icons-vue';
	import {
		createVNode
	} from 'vue';
	import {
		Modal,
		message
	} from 'ant-design-vue';

	export default {
		components: {
			STable,
			Ellipsis,
			addBox,
			imgBox
		},
		data() {
			return {
				state: 0,
				priceform: this.$form.createForm(this),
				pricevisible: false, //修改诊金指数
				searchflag: false,
				shenhe: 0, //审核
				status: 0, //状态
				addFlag: false,
				pagination: {
					current: 1, //默认当前叶数
					total: 0, // 数据总数 如果不设置就以绑定的数据量为准
					pageSize: 10, // 默认每页条数
					showSizeChanger: true, //是否可以改变 pageSize
					pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
					showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
					hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
				},
				dataSource: [],
				columns: [{
						title: 'id',
						dataIndex: 'id',
						key: 'id',
						width: 70,
					},
					{
						title: '名称',
						dataIndex: 'name',
						key: 'name',
						ellipsis: true,
					},
					{
						title: '电话号',
						dataIndex: 'phone',
						key: 'phone',
					},
					{
						title: '省份',
						dataIndex: 'province',
						key: 'province',
					},
					{
						title: '身份证号码',
						dataIndex: 'cardid',
						key: 'cardid',
					},

					{
						title: '类型',
						dataIndex: 'state',
						key: 'state',
						scopedSlots: {
							customRender: 'state'
						}
					},
					{
						title: '操作',
						key: 'operation',
						fixed: 'right',
						width: 150,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
				curdoc: 0,
				edittype: '', //修改类型
			}
		},
		created() {
			this.getList()
		},
		methods: {
			// 医生详情
			showDetail(v) {
				this.$router.push({
					path: '/doctorDetail',
					query: {
						id: v.id
					}
				})
			},
			// 修改诊金
			updatePrice() {
				var that = this
				const {
					priceform: {
						validateFields
					},
				} = this

				validateFields((errors, values) => {
					if (!errors) {
						if (this.edittype == 'kefu') {
							doctorKefu({
								id: this.curdoc,
								kefu: values.zhenfeibl
							}).then((res) => {
								if (res.code == 0) {
									this.pricevisible = false
									this.getList()
								}
							})
						} else if (this.edittype == 'zhenfei') {
							values.zhenfeibl = parseInt(values.zhenfeibl)
							doctorPriceSet({
								...values,
							}).then((res) => {
								if (res.code == 0) {
									this.pricevisible = false
									this.getList()
								}
							})
						} else {
							values.zhongyaobl = parseInt(values.zhenfeibl)
							doctorZhongyaoSet({
								...values,
							}).then((res) => {
								if (res.code == 0) {
									this.pricevisible = false
									this.getList()
								}
							})
						}
					}
				})
			},
			editPrice(val, edittype) {
				this.curdoc = val.id
				this.edittype = edittype
				this.pricevisible = true
				setTimeout(() => {
					if (edittype == 'kefu') {
						this.priceform.setFieldsValue({
							zhenfeibl: val.kefu
						})
					} else {
						this.priceform.setFieldsValue({
							zhenfeibl: edittype == 'zhenfei' ? val.zhenfeibl : val.zhongyaobl
						})
					}
				}, 500)
			},
			authInfo(val) {
				doctorAuth({
					id: val.id
				}).then(res => {
					message.info('审核成功');
					this.getList(0)
				})
			},
			previewImg(img) {
				this.$refs.preimg.initData(img)
			},
			getList() {
				salespersonList({
					pageNo: this.pagination.current,
					pageSize: this.pagination.pageSize,
					state: this.state
				}).then(res => {
					this.pagination.total = res.data.totalCount
					this.dataSource = res.data.data
				})
			},
			handleSearch() {
				this.searchflag = true
				this.pagination.current = 1
				this.getList()
			},
			resetSearch() {
				this.searchflag = false
				this.state = 0
				this.pagination.current = 1
				this.getList()
			},
			updateInfo(val) {
				this.addFlag = true
				this.$nextTick(() => {
					this.$refs.addBox.setUpdate(val)
				})
			},

			addCancel() {
				this.addFlag = false
			},
			AddSuccess() {
				this.addFlag = false
				this.getList()
			},
			addStore() {
				this.addFlag = true
				this.$nextTick(() => {
					this.$refs.addBox.updateflag = false
					this.$refs.addBox.setState()
				})
			},
			tablePaginationChange(e) {
				this.pagination = e
				this.getList()
			},
			getDate(stamp) {
				var date = new Date(stamp * 1000)
				return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date
					.getMonth() +
					1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
			},
			deletInfo(val) {
				hospitalDelet(val.id).then(res => {
					this.getList()
				})
			},
			infoDisable(val) {
				salespersonDel({
					id: val.id
				}).then(res => {
					this.getList()
				})
			}
		}
	}
</script>
<style scoped>
	.banner-img {
		width: 50px;
		height: 50px;
		border-radius: 5px;
		cursor: pointer;
	}
</style>